<!DOCTYPE html>
<html lang="ch">
<head>
    <meta charset="UTF-8">
    <title>This is BigData</title>
    <script src="/static/echarts.js"></script>
    <script src="/static/echarts-wordcloud.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        #echarts{
            display:flex;
            flex-wrap:wrap;
            justify-content:space-around;
        }
        #echarts div.item{
            width:600px;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="echarts">
    <div id="jzLine" class="item"></div>
    <div id="jzPie" class="item"></div>
    <div id="jzword" class="item"></div>
    <div id="jzBar" class="item"></div>
    <div id="xwqwLine" class="item"></div>
    <div id="xwqwPie" class="item"></div>
    <div id="xwqwWord" class="item"></div>
    <div id="xwqwBar" class="item"></div>
</div>
<script>
    var jzLine = echarts.init(document.getElementById("jzLine"));
    var jzPie = echarts.init(document.getElementById("jzPie"));
    var jzword = echarts.init(document.getElementById("jzword"));
    var jzBar = echarts.init(document.getElementById("jzBar"));
    var xwqwLine = echarts.init(document.getElementById("xwqwLine"));
    var xwqwWord = echarts.init(document.getElementById("xwqwWord"));
    var xwqwPie = echarts.init(document.getElementById("xwqwPie"));
    var xwqwBar = echarts.init(document.getElementById("xwqwBar"));

    function ijzLine(datas){//初始化：济职发言前十折线图
        var value = datas.value;
        var name = datas.name;
        var option = {
            title:{
                text:"济职发言前十折线图",
            },
            legend:{},
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    magicType:{
                        type:["line","bar"],
                    },
                    saveAsImage:{},
                },
            },
            tooltip:{
                show:true,
                trigger:"axis",
                axisPointer:{
                    type:"cross",
                },
            },
            xAxis:{
                data:name,
                axisLabel:{
                    rotate:-45,
                },
            },
            yAxis:{},
            series:[
                {
                    markPoint: {
                        data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                        ]
                    },
                    markLine: {
                        data: [
                            {type: 'average', name: '平均值'}
                        ]
                    },
                    name:"发言次数",
                    type:"line",
                    data:value,
                },
            ],
        };
        jzLine.setOption(option); 
    }
    function ijzPie(datas){//初始化：济职发言前十 饼状图
        var option = {
            title:{
                text:"济职发言前十饼状图",
                left:"center",
            },
            legend:{
                left:"left",
                top:30,
                orient:"vertical",
            },
            tooltip:{},
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    saveAsImage:{},
                },
            },
            series:[
                {
                    name:"发言次数",
                    type:"pie",
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        show: false,
                        position: 'center'
                    },
                    emphasis: {
                        label: {
                            show: true,
                            fontSize: '30',
                            fontWeight: 'bold'
                        }
                    },
                    data:datas,
                },
            ],
        };
        jzPie.setOption(option); 
    }
    function ijzword(datas){//初始化：济职发言前十 词云图
        var option = {
            title:{
                text:"济职发言前十词云图",
                left:"center",
            },
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    saveAsImage:{},
                },
            },
            series:[
                {   
                    name:"发言次数",
                    type:"wordCloud",
                    data:datas,
                    drawOutOfBound:true
                },
            ],
        };
        jzword.setOption(option);
    }
    function ijzBar(datas){//初始化：济职发言前十 柱状图 
        var value = datas.value;
        var name = datas.name;
        var option = {
            title:{
                text:"济职发言前十柱状图",
            },
            legend:{},
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    magicType:{
                        type:["bar","line"],
                    },
                    saveAsImage:{},
                },
            },
            tooltip:{
                show:true,
                trigger:"axis",
                axisPointer:{
                    type:"cross",
                },
            },
            xAxis:{
                data:name,
                axisLabel:{
                    rotate:-45,
                },
            },
            yAxis:{},
            series:[
                {
                    name:"发言次数",
                    type:"bar",
                    data:value,
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(220, 220, 220, 0.8)'
                    },
                },
            ],
        };
        jzBar.setOption(option);
    }
        
    function ixwqwLine(datas){//初始化的小屋前五的折线图
        var value = datas.value;
        var name = datas.name;
        var option1 = {
            title:{
                text:"小屋发言前五折线图",
            },
            legend:{},
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    magicType:{
                        type:["line","bar"],
                    },
                    saveAsImage:{},
                },
            },
            tooltip:{
                show:true,
                trigger:"axis",
                axisPointer:{
                    type:"cross",
                },
            },
            xAxis:{
                data:name,
                boundaryGap: false,
            },
            yAxis:{},
            series:[
                {

                    name:"发言次数",
                    type:"line",
                    data:value,
                    areaStyle: {},
                },
            ],
        };
        xwqwLine.setOption(option1);
    }
    function ixwqwPie(datas){//初始化：小屋发言前五饼状图
        var option = {
            title:{
                text:"小屋发言前五饼状图",
            },
            legend:{
                left:"30%",
                width:300,
            },
            tooltip:{},
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    saveAsImage:{},
                },
            },
            series:[
                {
                    name:"发言次数",
                    type:"pie",
                    radius: '60%',
                    data:datas,
                },
            ],
        };
        xwqwPie.setOption(option);
    }
    function newxwqwWord(datas){//初始化：小屋发言前五词云图
        var option1 = {
            title:{
                text:"小屋发言前五词云图",
            },
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    saveAsImage:{},
                },
            },
            series:[
                {   
                    name:"发言次数",
                    type:"wordCloud",
                    data:datas,
                    drawOutOfBound:true
                },
            ],
        };
        xwqwWord.setOption(option1);
    }
    function ixwqwBar(datas){//初始化：小屋发言柱状图
        var value = datas.value;
        var name = datas.name;
        var option = {
            title:{
                text:"小屋发言前五柱状图",
            },
            legend:{},
            toolbox:{
                feature:{
                    restore:{},
                    dataView:{},
                    magicType:{
                        type:["bar","line"],
                    },
                    saveAsImage:{},
                },
            },
            tooltip:{
                show:true,
                trigger:"axis",
                axisPointer:{
                    type:"cross",
                },
            },
            xAxis:{
                data:name,
                axisPointer:{
                    type:"shadow",
                },
            },
            yAxis:{},
            series:[
                {
                    name:"发言次数",
                    type:"bar",
                    data:value,
                },
            ],
        };
        xwqwBar.setOption(option);
    }
   
    function initialize(datas){//初始化函数*********************************************************************
        ijzLine(datas.jzLine);//执行渲染 济职发言前十：折线图
        ijzPie(datas.jzPie);//执行渲染 济职发言前十：饼状图
        ijzword(datas.jzPie);//执行渲染 济职发言前十：词云图
        ijzBar(datas.jzLine);//执行渲染 济职发言前十：柱状图

        ixwqwLine(datas.xwqwLine);//执行渲染小屋前五：折线图
        newxwqwWord(datas.xwqwPie);//执行渲染小屋前五：词云图
        ixwqwPie(datas.xwqwPie);//执行渲染小屋前五：饼状图
        ixwqwBar(datas.xwqwLine);//执行渲染小屋前五：柱状图
    }

    function initializeAjax(){//初始化的ajax
        var reqs = {"states":0,"type":"reqdata"};
        var req = JSON.stringify(reqs);
        var xhr = new XMLHttpRequest();
        xhr.open("post","/reqData",true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(req);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                var result = JSON.parse(xhr.responseText);
                initialize(result);//执行初始化函数
            }
        };
    }
    function updateDataAjax(){//更新数据的ajax
        var reqs = {"states":0,"type":"reqdata"};
        var req = JSON.stringify(reqs);
        var xhr = new XMLHttpRequest();
        xhr.open("post","/reqData",true);
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send(req);
        xhr.onreadystatechange = function(){
            if (xhr.readyState == 4 && xhr.status == 200){
                var result = JSON.parse(xhr.responseText);
                console.log(result);
                updateData(result);//执行更新数据的函数
            }
        };
    }
    
    function updatejzLine(datas){//更新济职发言前十折线图
        var value = datas.value;
        var name = datas.name;
        jzLine.setOption(
            {
                xAxis:{
                    data:name,
                },
                series:[{
                    data:value,
                }]
            }
        );
    }
    function updatejzPie(datas){//更新济职发言前十 饼状图
        jzPie.setOption(
            {
                series:[{
                    data:datas,
                }]
            }
        );
    }
    function updatejzBar(datas){//更新济职发言前十 柱状图
        var value = datas.value;
        var name = datas.name;
        jzBar.setOption(
            {
                xAxis:{
                    data:name,
                },
                series:[{
                    data:value,
                }]
            }
        );
    }

    function updateXwqwLine(datas){//更新小屋发言前五折线图
        var value = datas.value;
        var name = datas.name;
        xwqwLine.setOption(
            {
                xAxis:{
                    data:name,
                },
                series:[{
                    data:value,
                }]
            }
        );
    }
    function updateXwqwPie(datas){//更新小屋发言前五饼状图
        xwqwPie.setOption(
            {
                series:[{
                    data:datas,
                }]
            }
        );
    }
    function updateXwqwBar(datas){//更新小屋发言前五 柱状图
        var value = datas.value;
        var name = datas.name;
        xwqwBar.setOption(
            {
                xAxis:{
                    data:name,
                },
                series:[{
                    data:value,
                }]
            }
        );
    }
    
    function updateData(datas){//更新数据的主函数*******************************************************
        updatejzLine(datas.jzLine);//执行更新 济职前十 折线图
        updatejzPie(datas.jzPie);//执行更新 济职前十 饼状图
        updatejzBar(datas.jzLine);//执行更新 济职前十 柱状图
        
        updateXwqwLine(datas.xwqwLine);//执行更新小屋前五折线图
        updateXwqwPie(datas.xwqwPie);//执行更新小屋前五饼状图
        updateXwqwBar(datas.xwqwLine);//执行更新小屋前五柱状图
    }
    
    window.onload = initializeAjax;//页面加载后执行的函数
    setInterval(updateDataAjax,1000);//每1秒，更新数据的函数
</script>
</body>
</html>